<template>
  <div class="login">
    <div class="logo">
      <img src="../../assets/kk.png" alt />
    </div>
    <div class="sm_con">
      <div class="m-input-box">
        <img class="tt1" src="../../assets/account.png" alt />
        <input
          class="m-input"
          type="text"
          name="userName"
          placeholder="请输入手机"
          maxlength="40"
          v-model="mobile"
        />
      </div>
      <div class="m-input-box">
        <img class="tt2" src="../../assets/mima.png" alt />
        <input
          class="m-input"
          type="password"
          name="password"
          placeholder="请输入密码"
          maxlength="16"
          v-model="password"
        />
      </div>
      <div class="m-input-box">
        <img class="tt2" src="../../assets/yzm.png" alt />
        <input
          class="m-input"
          style="width:50%"
          type="text"
          name="yzm"
          placeholder="输入验证码"
          maxlength="8"
        />
        <input type="button" class="verification" v-model="checkCode" />
        <div @click="createCode">看不清？换一张</div>
      </div>
      <div class="loginto" @click="register()">注册</div>
      <div class="l_bo">
        <div class="psd_login">
          <router-link to="/pwd_login">密码登录</router-link>
        </div>
        <div class="reg">
          <router-link to="/">验证码登录</router-link>
        </div>
      </div>
    </div>
  </div>
</template>

<script>
export default {
  data() {
    return {
      istrue: true,
      mobile: "",
      password: "",
      modalShow: true,
      sendAuthCode: true,
      auth_time: 0,
      checkCode: "",
      code: ""
    };
  },
  created() {
    this.createCode();
  },
  methods: {
    createCode() {
      //先清空验证码的输入
      this.code = "";
      this.checkCode = "";
      this.picLyanzhengma = "";
      //验证码的长度
      var codeLength = 4;
      //随机数
      var random = new Array(
        0,
        1,
        2,
        3,
        4,
        5,
        6,
        7,
        8,
        9,
        "A",
        "B",
        "C",
        "D",
        "E",
        "F",
        "G",
        "H",
        "I",
        "J",
        "K",
        "L",
        "M",
        "N",
        "O",
        "P",
        "Q",
        "R",
        "S",
        "T",
        "U",
        "V",
        "W",
        "X",
        "Y",
        "Z"
      );
      for (var i = 0; i < codeLength; i++) {
        //取得随机数的索引（0~35）
        var index = Math.floor(Math.random() * 36);
        //根据索引取得随机数加到code上
        this.code += random[index];
      }
      //把code值赋给验证码
      this.checkCode = this.code;
    }
  },
  mounted: function() {}
};
</script>
<style scoped lang="less">
.f-flex {
  display: flex;
  display: -webkit-flex;
  align-items: center;
}
.verification {
  width: 2.346667rem;
  height: 1.2rem;
  font-size: 0.586667rem;
  font-weight: bold;
  background: #fff;
}
.forget {
  text-align: right;
  margin-top: 0.213333rem;
  a {
    color: #fff;
  }
}
.login {
  background: url("../../assets/login_bg.png") no-repeat fixed;
  background-size: cover;
  min-height: 100%;
  .sm_con {
    width: 88%;
    margin: auto;
  }
  .logo {
    img {
      width: 3.413333rem;
      height: 3.706667rem;
      margin-top: 0.8rem;
    }
  }
  color: #fff;
  .m-input-box {
    .f-flex();
    position: relative;
    padding-top: 0.106667rem;
    padding-bottom: 0.106667rem;
    margin-top: 1.333333rem;
    border-bottom: 1px solid #fff;
    .tt1 {
      width: 0.506667rem;
      height: 0.586667rem;
      margin-right: 0.533333rem;
    }
    .tt2 {
      width: 0.506667rem;
      height: 0.586667rem;
      margin-right: 0.533333rem;
    }
    .m-input {
      width: 60%;
      background: transparent;
      border: none;
      color: #fff;
      font-size: 0.4rem;
    }
    ::-webkit-input-placeholder {
      color: #e5e5e5;
      font-size: 0.4rem;
    }
    :-moz-placeholder {
      color: #e5e5e5;
      font-size: 0.4rem;
    }
    ::-moz-placeholder {
      color: #e5e5e5;
      font-size: 0.4rem;
    }
    :-ms-input-placeholder {
      color: #e5e5e5;
      font-size: 0.4rem;
    }
    .get_code {
      position: absolute;
      right: 0.2rem;
      font-size: 0.4rem;
      color: #fff;
    }
  }
  .loginto {
    height: 0.986667rem;
    .f-flex();
    background: #546ce3;
    justify-content: center;
    width: 100%;
    border: 1px solid #fff;
    margin-top: 2.133333rem;
    text-align: center;
    line-height: 0.986667rem;
    color: #fff;
    border-radius: 0.266667rem;
    font-size: 0.48rem;
  }
  .l_bo {
    display: flex;
    display: -webkit-flex;
    justify-content: space-between;
    font-size: 0.4rem;
    margin-top: 0.16rem;
    padding-bottom: 1rem;
    a {
      font-size: 0.4rem;
      color: #fff;
    }
  }
}
</style>
